import { createApp } from 'vue'
import App from './App.vue'
import {createStore} from 'vuex'

const app = createApp(App)

const store = createStore({
    /*** 可用registerModule替代
    modules:{
        helloWorld8: storeModule1,
        helloWorld9: storeModule2
    },
     */
    state(){
        return {
            count:0
        }
    },
    mutations: {
        increment(state){
            state.count ++
        },
        increment2(state,n){
            state.count +=n
        },
        increment3(state,payload){
            state.count += payload.count
        }
    },
    getters:{
        countText (state) {
            return (s)=>{
                return state.count +  s
            }
            
        }
    },
    actions:{
        asyncIncrement(context, payload){
            setTimeout(()=>{
                context.commit('increment3',payload)
            }, 3000)
        }
    }
})

app.use(store)

const storeModule1 = {
    namespaced : true,
    state(){
        return {
            count1 : 7
        }
    },
    mutations:{
        incrementOne(state, payload){
            state.count1 += payload.count
        }
    }
}

const storeModule2 = {
    namespaced : true,
    state(){
        return {
            count2 : 5
        }
    },
    mutations:{
        incrementTwo( state, payload){
            state.count2 += payload.count
            this.state.helloWorld8.count1 += payload.count
        }
    }
}


store.registerModule('helloWorld8', storeModule1)
store.registerModule('helloWorld9', storeModule2)

app.mount('#app')
